<template>
	<view>
		<view style="position: relative;">
			
	
		<view style="width: 219rpx;height: 219rpx;">
				<canvas class="timer" canvas-id="timer" @click="showPop = true"/>
		</view>
	
			
			   
			<view class="control" style="position: absolute;top: 146.53rpx;left: 78.47rpx;">
             <div class="begin" v-if="!isRunning" @tap="start" >begin！</div>	
		     <div class="begin" v-if="isRunning" @tap="pause">{{ isPaused ? 'go on' : 'pause' }}</div>
		     <div class="begin" v-if="isRunning" @tap="reset">quit</div>
		   </view>
		
		 	</view>
	</view>
</template>

<script>
export default {
	name:"Tomato",
    data() {
      return {
		countdownTime: 25*60, // 默认25分钟倒计时
        timer: null,
        ctx: null,
        r: 0,
        startTime: 0,
        remainingTime: 25*60,
        isRunning: false,
        isPaused: false,
		showPop: false,
		fontfamily:'Dotties Chocolate',
      }
    },
  onReady() {
    this.ctx = uni.createCanvasContext("timer", this);
    const res = uni.getSystemInfoSync();
    this.r = Math.min(res.windowWidth, res.windowHeight) / 2 ;
    this.draw(1);
	
  },
  methods: {
    draw(percent) {
      this.ctx.clearRect(0, 0, this.r * 2, this.r * 2);

	  const res = wx.getSystemInfoSync();
	      const rpx = uni.getSystemInfoSync();
	  var windowWidth = res.windowWidth;
	  var windowHeight = res.windowHeight;
	  var windowWidth1 = rpx.windowWidth;
	  var windowHeight1 = rpx.windowHeight;
      // 绘制白色圆形（暂时没用）
      this.ctx.setFillStyle("#ffffff");
      this.ctx.beginPath();
      this.ctx.arc(this.r*0.385, this.r*0.375, this.r/3.2, 0, 2 * Math.PI, false);
      this.ctx.closePath();
      this.ctx.fill();

      // 绘制倒计时圆环
      this.ctx.setFillStyle("#FACC31");
      this.ctx.beginPath();
      this.ctx.moveTo(this.r, this.r);
      this.ctx.arc(this.r*0.385, this.r*0.375, this.r/3.2, -Math.PI / 2, 2 * Math.PI * percent - Math.PI / 2, false);
      this.ctx.closePath();
      this.ctx.fill();
	  
      // 绘制白色圆形（暂时没用）
      this.ctx.setFillStyle("#ffffff");
      this.ctx.beginPath();
      this.ctx.arc(this.r*0.385, this.r*0.375, this.r/3.6, 0, 2 * Math.PI, false);
      this.ctx.closePath();
      this.ctx.fill();
      // 绘制倒计时文本1
	this.ctx.setFontSize(24);
	// this.ctx.fontfamily("Dotties Chocolate1");
      this.ctx.setFillStyle("#FACC31");
      this.ctx.setTextAlign("center");
      this.ctx.setTextBaseline("middle");
	  this.ctx.shadowOffsetX=0;//用来设定阴影在 X轴的延伸距
	  	  		    this.ctx.shadowOffsetX=this.r/80;//用来设定阴影在 Y轴的延伸距
	  	  		    this.ctx.shadowBlur = 0;//设定阴影的模糊程度 默认0
	  	   			this.ctx.shadowColor = "#E5E5E5";//设定阴影颜色效果
	  this.ctx.font = 'normal 37.5rpx DottiesChocolate-HeavyItalic';
      const minute = Math.floor(this.remainingTime / 60);
      const second = Math.floor(this.remainingTime % 60);
      const text = `${minute < 10 ? "0" : ""}${minute}:${second < 10 ? "0" : ""}${second}`;
      this.ctx.fillText(text, this.r*0.385, this.r*0.335);
      this.ctx.draw();
    },
	cancelPop() {
	  //取消
	  this.contentPop = "";
	  this.showPop = false;
	},
    start() {
      this.isRunning = true;
      this.startTime = new Date().getTime();
      this.timer = setInterval(() => {
        const now = new Date().getTime();
        const elapsedTime = (now - this.startTime) / 1000;
        this.remainingTime = this.countdownTime - elapsedTime;
        if (this.remainingTime <= 0) {
          this.remainingTime = 0;
          this.isRunning = false;
          clearInterval(this.timer);
        }
        const percent = 1 - this.remainingTime / this.countdownTime;
        this.draw(percent);
      }, 50);
    },
    pause() {
      if (this.isPaused) {
        this.isPaused = false;
        this.startTime = new Date().getTime() - (this.countdownTime - this.remainingTime) * 1000;
        this.timer = setInterval(() => {
          const now = new Date().getTime();
          const elapsedTime = (now - this.startTime) / 1000;
          this.remainingTime = this.countdownTime - elapsedTime;
          if (this.remainingTime <= 0) {
            this.remainingTime = 0;
            this.isRunning = false;
            clearInterval(this.timer);
          }
          const percent = 1 - this.remainingTime / this.countdownTime;
          this.draw(percent);
        }, 50);
      } else {
        this.isPaused = true;
        clearInterval(this.timer);
      }
    },
    reset() {
      clearInterval(this.timer);
      this.timer = null;
      this.remainingTime = this.countdownTime;
      this.isRunning = false;
      this.isPaused = false;
      this.draw(1);
    },
setCountdownTime() {
if (this.countdownTime < 1) {
this.countdownTime = 1;
} else if (this.countdownTime > 999) {
this.countdownTime = 999;
}
this.countdownTime *= 60;
this.remainingTime = this.countdownTime;
this.draw(0);
this.showPop = false;
if (this.isRunning) {
clearInterval(this.timer);
this.start();
}
},
    },
    };
</script>

<style>
	.begin {
		z-index: 10000;
		height: 25.69rpx;
		width: 141rpx;
		font-size: 36rpx;
		font-family: Dotties Chocolate1;
		letter-spacing: 1rpx;
		color: #FACC31;
		line-height: 9.7222rpx;
		margin: 16.66rpx auto 0 auto;
		text-align: center;
		text-shadow: 0px 6.944rpx 0px #E5E5E5;
	}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer {
width: 259rpx;
  margin: 0 auto;

}


.button {
font-size: 42rpx;
  color: #fff;
  padding: 1rpx 20rpx;
  border-radius: 20px;
  border: none;
  font-family: Dotties Chocolate;
  height: 94rpx;
  background: #007AFF;
  border-radius: 33rpx;
}

.time-select {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.diytime{
	display: flex;
}
.diytimetext{
	font-size: 20px;
	margin-left: 20px;
}
.input {
  width: 100px;
  height: 30px;
  border: 1px solid #007aff;
  border-radius: 5px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  font-size: 14px;
}
</style>